<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>新建联系人</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <style>
        .container-fluid {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>

</head>
<body>

<header th:include="index.html::top"></header>

<div class="container-fluid">
    <form action="/doAddressBook/addNewContact" method="post">
        <h3>新建联系人</h3>
        <div class="input-group">
            <label for="name">姓名：</label>
            <input type="text" class="form-control" id="name" name="name" placeholder="请输入您的姓名" required>
        </div>
        <div class="input-group">
            <label for="phone">电话号码：</label>
            <input type="tel" class="form-control" id="phone" name="phoneNumber" placeholder="请输入您的电话号码" required>
        </div>
        <div class="input-group">
            <label for="birthday">生日：</label>
            <input type="date" class="form-control" id="birthday" name="birthday" required>
        </div>
        <div class="input-group">
            <label for="address">家庭住址：</label>
            <input type="text" class="form-control" id="address" name="address" placeholder="请输入您的家庭住址" required>
        </div>
        <div class="input-group">
            <label for="school">学校：</label>
            <input type="text" class="form-control" id="school" name="school" placeholder="请输入您的学校" required>
        </div>
        <div class="input-group">
            <label for="qq">QQ号码：</label>
            <input type="text" class="form-control" id="qq" name="qq" placeholder="请输入您的QQ号码" required>
        </div>
        <div class="input-group">
            <label for="email">邮箱：</label>
            <input type="email" class="form-control" id="email" name="email" placeholder="请输入您的邮箱" required>
        </div>
        <div class="input-group">
            <label for="tags">备注：</label>
            <select class="form-control" id="tags" name="label">
                <option value="Colleague">同事</option>
                <option value="Friend">朋友</option>
                <option value="Family">家人</option>
                <option value="custom">自定义</option>
            </select>
        </div>
        <div class="input-group" id="customTagGroup" style="display: none;">
            <label for="customTag">自定义标签：</label>
            <input type="text" class="form-control" id="customTag" placeholder="请输入自定义备注">
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
    </form>
</div>
<script>
    $(document).ready(function() {
        $('#tags').change(function() {
            if ($('#tags').val() === 'custom') {
                $('#customTagGroup').show();
                $('#tags').removeAttr("name");
                $('#customTag').attr("name","label");
            } else {
                $('#customTagGroup').hide();
                $('#tags').attr("name","label");
                $('#customTag').removeAttr("name");
            }
        });
    });

    $('#userWelcome').append("<p>"+"欢迎，"+localStorage.getItem('welcome')+"</p>");


</script>

</body>
</html>